<template>
	<view class="home">
		<!--    #ifdef H5-->
		<template v-if="isScan">
			<ScanCode @GetCode="getRestaurantId" />
		</template>
		<template v-else>
			<!--    #endif-->
			<!-- 轮播图+按钮选项 -->
			<view class="info-container">
				<!-- 轮播图 -->
				<Swiper :swiperHeight='1000'></Swiper>
				<!-- 按钮 -->
				<view class="left-btn" @click="ceshi">
					<view class="btn">
						<!-- 图片 -->
						<view class="image">
							<image src="/static/images/pages/home/book@2x.webp" mode=""></image>
						</view>
						<!-- 标题 -->
						<view class="title">
							查看订单
						</view>
						<!-- 介绍 -->
						<view class="content">
							往年的美食
						</view>
					</view>
				</view>
				<view class="rigth-btn">
					<view class="btn" @click="scanQrcode">
						<!-- 图片 -->
						<view class="image">
							<image src="/static/images/pages/home//scan@2x.webp" mode=""></image>
						</view>
						<!-- 标题 -->
						<view class="title">
							扫码点餐
						</view>
						<!-- 介绍 -->
						<view class="content">
							开启美食之旅
						</view>
					</view>
				</view>
			</view>
			<!-- 地图信息 -->
			<view class="map-container" @click="changeMap(restaurantInfo.id)">
				<!-- 地图信息 -->
				<view class="mapInfo">
					<view class="mapBox">
						<view class="left">
							<image class="map-icon" src="/static/images/pages/home/MapPin@2x.webp" mode=""></image>
							<span>{{restaurantInfo.name}}</span>
						</view>
						<view class="right">
							<span>切换门店
								<image class="change-icon" src="../../static/images/pages/home/CaretRight@2x.webp"
									mode="">
								</image>
							</span>
						</view>
					</view>
				</view>
				<!-- 邀请好友 -->
				<view class="info">
					<image style="width: 100%;height: 100%;" src="../../static/images/pages/home/image.png@2x.webp"
						mode="">
					</image>
				</view>
			</view>
			<!--      #ifdef H5-->
		</template>
		<!--    #endif-->
	</view>
</template>

<script>
	//引入轮播图
	import Swiper from '@/components/Swiper/index.vue'
	// #ifdef H5
	import ScanCode from "@/components/ScanCode/index.vue";
	const qrcode = require('qrcodejs2')
	// #endif
	import {
		requestDemo
	} from '@/common/api.js'
  import {getRestaurantInfo} from "../../common/api";
  import {mapState} from "vuex";
	export default {
		name: 'home',
		components: {
			Swiper,
			// #ifdef H5
			ScanCode
			// #endif
		},
		data() {
			return {
				postersImageList: [], //头部
				code: '', //扫码
				restaurantId: '', //餐厅id
				// #ifdef H5
				isScan: false,
				// #endif
			}
		},
    computed: {
      ...mapState({restaurantInfo: state => state.restaurant.restaurantInfo})
    },
    mounted() {
      this.$store.dispatch('setRestaurantId', 1)//默认餐厅id
    },
		methods: {
      async getRestaurantId(val,flag=false) {
        try {
          if (val) {
            this.isScan = false
            const value = JSON.parse(val)
            console.log(value, 'value')
            if (value['restaurantId'] !== undefined || value.hasOwnProperty('restaurantId')) {
              this.restaurantId = value.restaurantId
              console.log(this.restaurantId, 'this.restaurantId')
              const res =await getRestaurantInfo(this.restaurantId);
              if(res.message==='未找到该餐厅'){
                uni.showToast({
                  title: '未找到该餐厅',
                  icon: 'none',
                  //显示持续时间为 2秒
                  duration: 100
                })
              }else {
                this.$store.dispatch('setRestaurantId', this.restaurantId)
                this.$store.dispatch('changeNavBar', 'menu')
              }
            } else {
              this.restaurantId = ''
              uni.showToast({
                title: '请扫描正确的二维码',
                icon: 'error',
                //显示持续时间为 2秒
                duration: 1200
              })
            }
          }
        } catch (e) {
          console.log(e)
        }
      },
		 	scanQrcode() {
				// #ifndef H5
        const _that = this
				uni.scanCode({
					scanType: ['qrCode'],
					// 扫描的类型
          async	success(res) {
						console.log('二维码类型：' + res.scanType);
						console.log('二维码内容：' + res.result);
            await _that.getRestaurantId(res.result)
					},
					fail(err) {
						console.log('扫码失败', err);
					},
					complete(end) {
						console.log('扫码结束', end)
					}
				});
				// #endif
				// #ifdef H5
				this.isScan = true;
				// #endif
			},
			async ceshi() {
				try {
					const res = await requestDemo()
					console.log(res)
				} catch (err) {
					console.log(err)
				}
			},
      changeMap(id) {
        uni.navigateTo({
          url: `/pages/store/index`
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		min-height: 100%;
		background-color: $pages-background-color;

		// 轮播图+按钮选项
		.info-container {
			position: relative;
			width: 100%;
			height: 1000rpx;
			border-radius: 0px 0px 48rpx 48rpx;
			background: linear-gradient(100.5deg, rgba(38, 188, 212, 1) 0%, rgba(38, 188, 212, 0.57) 100%);
			overflow: hidden;

			// 图标位置
			.image {
				width: 72rpx;
				height: 72rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			//共有属性
			.btn {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;
				margin-left: 40rpx;
				margin-top: 10rpx;
				width: calc(100% - 80rpx);
				height: 220rpx;

				.title {
					margin-left: 4rpx;
					margin-top: 8rpx;
					font-size: 32rpx;
					font-weight: 700;
					color: #000000;
				}

				.content {
					margin-left: 4rpx;
					margin-top: 8rpx;
					font-size: 12px;
					font-weight: 400;
					color: #9E9E9E;
				}
			}

			.left-btn {
				position: absolute;
				bottom: 40rpx;
				left: 50rpx;
				width: 260rpx;
				height: 280rpx;
				border-radius: 24rpx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 2rpx 10rpx 0px $shadow-color;
			}

			.rigth-btn {
				position: absolute;
				bottom: 40rpx;
				right: 50rpx;
				width: 350rpx;
				height: 280rpx;
				opacity: 1;
				border-radius: 24rpx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 2rpx 10rpx 0px $shadow-color;
			}
		}

		// 地图信息
		.map-container {
			height: 200rpx;
			background: $white-notion;

			// 地图信息
			.mapInfo {
				width: 100%;
				height: 180rpx;
				border-radius: 0px 0px 0px 60rpx;
				background-color: $pages-background-color;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.mapBox {
					width: 720rpx;
					height: 90rpx;
					background-color: $white-notion;
					border-radius: 48rpx 0px 0px 48rpx;
					box-shadow: 0px 1rpx 1rpx 0px $shadow-color;
					display: flex;
					align-items: center;
					justify-content: space-between;

					// 左边
					.left {
						height: 100%;
						width: 70%;
						display: flex;
						align-items: center;

						// 地图图标
						.map-icon {
							margin-left: 32rpx;
							width: 48rpx;
							height: 48rpx;
						}

						span {
							flex: 1;
							font-size: 28rpx;
							font-weight: 500;
							color: $main-text;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}

					.right {
						flex: 1;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: flex-end;

						span {
							/** 文本1 */
							font-size: 24rpx;
							font-weight: 600;
							color: $main-color;
							margin-right: 32rpx;
							vertical-align: middle;
							display: flex;
							align-items: flex-end;

							.change-icon {
								width: 28rpx;
								height: 28rpx;
								margin-bottom: 2rpx;
							}
						}
					}
				}
			}

			// 邀请好友
			.info {
				margin: 0 auto;
				margin-top: 20rpx;
				width: 720rpx;
				height: 180rpx;
				border-radius: 12rpx;
				background: linear-gradient(210.58deg, #FFFFFF 0%, #26BCD4 100%);
				overflow: hidden;
			}
		}
	}
</style>
